<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="800px"
      :isHandle="true"
    />

    <Associated_vehicles
      :res="Associated_devices_data"
      v-if="Associated_devices_data.show"
      v-on:Associated_devices_call="Associated_devices_call"
    ></Associated_vehicles>
  </div>
</template>
<script>
import Associated_vehicles from "./cus/Associated_vehicles";
export default {
  components: {
    Associated_vehicles
  },
  data() {
    var checkAge = (rule, value, callback) => {
      setTimeout(() => {
        if (isNaN(value)) {
          callback(new Error("Please Input数字值"));
        } else {
          if (value < 0) {
            callback(new Error("不能小于0"));
          } else {
            callback();
          }
        }
      }, 200);
    };
    return {
      Associated_devices_data: {
        show: false,
        id: ""
      },
      searchData: {
        btType: ""
      },
      searchForm: [
        {
          type: "select",
          prop: "btType",
          placeholder: "BatteryType",
          width: 150,
          options: [
            { label: "48V", value: "48" },
            { label: "60V", value: "60" },
            { label: "72V", value: "72" }
          ]
        }
        // {
        //   type: 'input',
        //   prop: 'name',
        //   placeholder: 'Replacement Count',
        //   width: 150
        // },
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        }
      ],

      tableHandles: [
        {
          label: "AddPackage",
          type: "primary",
          handle: e => this.elFormVisible()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "序号",
          prop: "id"
        },
        {
          label: "租车Package名",
          prop: "mealName"
        },
        {
          label: "Package费用",
          prop: "price"
        },
        {
          label: "Valid Duration",
          prop: "days"
        },
        {
          label: "Replacement Count",
          prop: "num"
        },
        {
          label: "BatteryType",
          prop: "btType"
        },
        /* {
					label: '已关联车辆',
					prop: 'giftMoney'
				}, */
        {
          label: "Update Time",
          prop: "ctime"
        },
        {
          label: "EnableStatus",
          type: "switch",
          prop: "status",
          values: [1, 2],
          change: row => this.changestate(row)
        },

        {
          label: "Operations",
          type: "button",
          width: 300,
          btnList: [
            {
              label: "已关联车辆",
              type: "primary",
              handle: row => {
                this.Associated_devices_data.id = row.id;
                this.Associated_devices_data.show = true;
              }
            },
            {
              label: "Edit",
              type: "primary",
              handle: row => this.elFormDetail(row)
            },
            {
              label: "Delete",
              type: "primary",
              handle: row => this.del(row)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        mealName: "",
        btType: "",
        days: "",
        num: "",
        price: ""
      },
      formCols: [
        {
          type: "input",
          label: "租车Package Name",
          width: 350,
          prop: "mealName"
        },
        {
          type: "select",
          label: "车辆BatteryType",
          width: 350,
          prop: "btType",
          options: [
            { label: "48V", value: "48" },
            { label: "60V", value: "60" },
            { label: "72V", value: "72" }
          ]
        },
        {
          type: "input",
          label: "Package时长",
          width: 350,
          prop: "days",
          remark: "天"
        },
        // { type: "select", label: "单位", width: 350, prop: "name" },
        {
          type: "input",
          label: "BatteryReplacement Count",
          width: 350,
          prop: "num"
        },
        // { type: "input", label: "Frequency", width: 350, prop: "giftMoney" },
        {
          type: "input",
          label: "Package费用",
          width: 350,
          prop: "price",
          remark: "元"
        }
      ],
      formRules: {
        mealName: [
          { required: true, message: "Please Input", trigger: "blur" }
        ],
        btType: [{ required: true, message: "Please Select", trigger: "blur" }],
        days: [
          { required: true, message: "Please Input", trigger: "blur" },
          { validator: checkAge, trigger: "blur" }
        ],
        num: [
          { required: true, message: "Please Input", trigger: "blur" },
          { validator: checkAge, trigger: "blur" }
        ],
        price: [
          { required: true, message: "Please Input", trigger: "blur" },
          { validator: checkAge, trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.mealRent_list(parm);
      if (res) {
        this.tableData = res.rows || [];
        this.tablePage.total = res.total;
      }
    },
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData.id) {
            const res = await this.apis.mealRent_updata({ ...this.formData });
          } else {
            const res = await this.apis.mealRent_save({ ...this.formData });
          }
          this.elFormVisible();
          this.init();
        }
      });
    },
    async changestate(row) {
      const res = await this.apis.mealRent_updata({
        id: row.id,
        status: row.status
      });
      this.$message({
        message: "Operations Success！",
        type: "success"
      });
    },
    elFormDetail(row) {
      console.log(row);
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      this.elFormVisible();
    },
    del(row) {
      this.$confirm(`DeleteCurrent这条Data`, "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      }).then(async () => {
        const res = await this.apis.mealRent_del({
          id: row.id
        });

        this.init();

        this.$message({
          message: "Operations Success！",
          type: "success"
        });
      });
    },
    Associated_devices_call() {
      this.Associated_devices_data.show = false;
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
